<style lang="scss" scoped>
</style>
<template>
  <page-box>
    <div class="ui-search-box" slot="search-form">
      <el-form class="ui-search-form" label-width="120px" :model="params" ref="form">
        <el-form-item label="学号" prop="stuNo">
          <el-input size="mini" class="ui-item-reset" v-model="params.stuNo" clearable></el-input>
        </el-form-item>
        <el-form-item label="学生姓名" prop="stuName">
          <el-input size="mini" class="ui-item-reset" v-model="params.stuName" clearable></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="stuAge">
          <el-input size="mini" class="ui-item-reset" v-model="params.stuAge" clearable></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="stuSex">
          <el-select placeholder="请选择" size="mini"  v-model="params.stuSex" class="ui-item-reset" clearable>
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业" prop="stuMajor">
          <el-select v-model="params.stuMajor" placeholder="请选择" size="mini" class="ui-item-reset" clearable>
            <el-option
              v-for="item in options.majorList"
              :key="item.stuMajor"
              :label="item.stuMajor"
              :value="item.stuMajor">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年级" prop="stuGrade">
          <el-select v-model="params.stuGrade" placeholder="请选择" size="mini" class="ui-item-reset" clearable>
            <el-option
              v-for="item in options.gradeList"
              :key="item.stuGrade"
              :label="item.stuGrade"
              :value="item.stuGrade">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="stuClass">
          <el-select v-model="params.stuClass" placeholder="请选择" size="mini" class="ui-item-reset" clearable>
            <el-option
              v-for="item in options.classList"
              :key="item.stuClass"
              :label="item.stuClass"
              :value="item.stuClass">
            </el-option>
          </el-select>
      </el-form-item>
        <el-form-item label="手机" prop="stuPhone" >
          <el-input size="mini" class="ui-item-reset" v-model="params.stuPhone" clearable></el-input>
        </el-form-item>
        <el-form-item label="每页数据">
          <el-select size="mini" class="ui-item-reset" v-model="params.pageSize">
            <el-option label="5" :value="5"></el-option>
            <el-option label="10" :value="10"></el-option>
            <el-option label="20" :value="20"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="ui-search-btus">
        <el-button type="primary" size="mini" @click="getData">搜索</el-button>
        <el-button size="mini" @click="resetForm('form')">重置</el-button>
      </div>
    </div>
    <div class="ui-list ui-box" slot="list-box">
      <div class="box-header ui-list-header">
        <div>学生列表</div>
        <div>
          <el-button type="primary" size="mini" @click="exportExcel">导出</el-button>
        </div>
      </div>
      <el-table :data="dataList" @selection-change="handleSelectionChange" :cell-style="cellStyle"
                :header-cell-style="rowClass" v-loading="tabLoading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="stuNo" label="学号"></el-table-column>
        <el-table-column prop="stuName" label="学生姓名"></el-table-column>
        <el-table-column prop="stuAge" label="年龄"></el-table-column>
        <el-table-column prop="stuSex" label="性别">
          <template v-if="scope.row.stuSex!=null" slot-scope="scope">
            <span v-if="scope.row.stuSex===1">男</span>
            <span v-else>女</span>
          </template>
        </el-table-column>
        <el-table-column prop="stuMajor" label="专业" width="150px"></el-table-column>
        <el-table-column prop="stuGrade" label="年级"></el-table-column>
        <el-table-column prop="stuClass" label="班级"></el-table-column>
        <el-table-column prop="stuPhone" label="手机" width="110px"></el-table-column>
        <el-table-column prop="buildingNo" label="宿舍楼"></el-table-column>
        <el-table-column prop="dorNo" label="宿舍号"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-check" circle size="mini" v-if="scope.row.status===1"></el-button>
            <el-button type="danger" icon="el-icon-close" circle v-else size="mini"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button size="mini" @click="checkDetail(scope.row)">详情</el-button>
            <el-button size="mini" type="danger" @click="deleteItem(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="ui-pagination"
        @current-change="changPageNum"
        layout="total, prev, pager, next"
        :current-page="this.params.pageNum"
        :page-size="this.params.pageSize"
        :total="total">
      </el-pagination>
      <!--      <add-item v-bind:userItem.sync='studentItem' @submit="addItem" ref="addPerm"></add-item>-->
    </div>
  </page-box>
</template>
<script>
  import pageBox from '@/components/pageBox'
  // import addItem from '@/components/user/addItem.vue'

  export default {
    name: 'studentList',
    components: {
      pageBox
    },
    data() {
      return {
        dataList: [],
        exportList: [],
        studentItem: {},
        params: {
          stuNo:'',
          userId:"",
          dorId:'',
          stuName:'',
          stuAge:'',
          stuSex:'',
          stuMajor:'',
          stuGrade:'',
          stuClass:'',
          stuPhone:'',
          status:'',
          pageNum: 1,
          pageSize: 10,
        },
        total: 0,
        tabLoading: false,
        options:[],
        classList:[],
        gradeList:[],
        majorList:[]

      }
    },
    created() {
      this.getData()
    },
    methods: {
      changPageNum(val) {
        this.params.pageNum = val
        this.getData()
      },
      getData() {
        post('/pms_api/student/list', this.params).then(res => {
          this.dataList = res.data
          this.tabLoading = false
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
        post('/pms_api/student/majorGradeClassList').then(res => {
          this.options = res.data
          console.log(res.data)
          this.tabLoading = false
        }).catch(err => {
          this.tabLoading = false
          console.log(err)
        })
      },
      open() {
        this.$refs.addPerm.openWindow('新增用户')
      },
      checkDetail(item) {
        this.$router.push({
          path: '/studentDetail',
          query: {
            title: item.stuName,
            id: item.userId
          }
        })
      },
      deleteItem(item) {
        post('/pms_api/student/delete', {'userId': item.userId}).then(res => {
          this.getData()
        }).catch(err => {
          console.log(err)
          this.tabLoading = false
        })
      },
      handleSelectionChange(val) {
        this.exportList = val
      },
      exportExcel() {
        let stuSex = {1: '男', 2: '女'};
        if (this.exportList.length > 0) {
          this.exportList.forEach(item => {
            item.stuSex = stuSex[item.stuSex]
          });
          const tHeader = ['学号', '学生姓名', '年龄', '性别', '专业', '年级', '班级', '手机号', '宿舍楼', '宿舍号'];
          const filterVal = ['stuNo', 'stuName', 'stuAge', 'stuSex', 'stuMajor', 'stuGrade', 'stuClass', 'stuPhone', 'buildingNo', 'dorNo'];
          const list = this.exportList;
          this.$getGlobal.exportFun('学生列表', tHeader, filterVal, list);
        } else {
          this.$message.error('请先选择需要导出的列表项');
        }
      },
      //表格居中
      cellStyle({row, colum, rowIndex, columIndex}) {
        return "text-align: center";
      },
      rowClass({row, rowIndex}) {
        return "text-align: center";
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.getData()
      },
    }
  }
</script>


